import 'package:common_utils/common_utils.dart';
import 'package:flutter/material.dart';
import 'package:osc/common/MyTextStyle.dart';
import 'package:osc/models/entity/osc_search_result_entity.dart';
import 'package:osc/res/dimens.dart';
import 'package:osc/ui/pages/post/post_detail_page.dart';
import 'package:osc/ui/widgets/image_loader.dart';
import 'package:osc/utils/navigator_util.dart';
import 'package:osc/utils/pd_util.dart';

import '../real_rich_text.dart';

class OscSearchArticleWidget extends StatelessWidget {
  final OscSearchArticle article;

  const OscSearchArticleWidget({Key key, @required this.article}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        NavigatorUtil.pushPage(context, PostDetailPage(id: article.oscId, type: article.type,));
      },
      child: Container(
        color: Colors.white,
        padding: EdgeInsets.all(Dimens.gap_activity_horizontal),
        child: buildContent(),
      ),
    );
  }

  buildContent(){
    int imageCount = article.imgs?.length??0;
    if(imageCount == 0){
      return buildContentWithoutImage();
    } else if(imageCount == 1){
      return buildContentWithOneImage();
    } else {
      return buildContentWithImages();
    }
  }

  buildContentWithImages(){
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        buildTitle(),
        GridView.builder(
          shrinkWrap: true,
            primary: false,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
              crossAxisSpacing: Dimens.gap_view_big,
              childAspectRatio: 1.6,
            ),
            itemBuilder: (BuildContext context, int index){
              return buildImage(article.imgs[index]);
            },
          itemCount: article.imgs.length,
        ),
        buildBottom(),
      ],
    );
  }

  buildContentWithoutImage(){
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        buildTitle(),
        buildDesc(),
        buildBottom(),
      ],
    );
  }

  buildContentWithOneImage(){
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: buildContentWithoutImage(),
        ),
        buildImage(article.imgs[0]),
      ],
    );
  }

  buildImage(String url){
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black12),
      ),
      child: ImageLoader(
        url: url,
        width: Dimens.view_search_list_image_width,
        height: Dimens.view_search_list_image_height,
        fit: BoxFit.cover,
      ),
    );
  }

  buildTitle() {
    List<TextSpan> textSpans = List<TextSpan>();
    if(article.type == 2){
      textSpans.add(buildImageSpan("tag_question", EdgeInsets.only(right: Dimens.gap_view_normal)));
    }
    textSpans.add(buildTextSpan(article.title));
    return Padding(
        padding: EdgeInsets.only(bottom: Dimens.gap_view_big),
      child: RealRichText(
        textSpanList:textSpans,
      ),
    );
  }

  buildDesc(){
    return Text(article.desc, style: MyTextStyle.LIST_BODY, maxLines: 2, overflow: TextOverflow.ellipsis,);
  }

  buildTextSpan(String text){
    return TextSpan(
      text: text,
      style: TextStyle(color: Colors.black, fontSize: Dimens.font_sp14, fontWeight: FontWeight.bold),
    );
  }

  buildImageSpan(String imageName, EdgeInsets margin){
    return ImageSpan(
      AssetImage(PdUtil.getImagePath(imageName)),
      imageWidth: Dimens.view_item_tag_height_biggest,
      imageHeight: Dimens.view_item_tag_height_small,
      margin: margin,
    );
  }

  buildBottom(){
    return Padding(
      padding: EdgeInsets.only(top: Dimens.gap_view_big),
      child: Row(
        children: <Widget>[
          Text("@${article.authorName} ${TimelineUtil.formatByDateTime(DateTime.parse(article.pubDate), dayFormat: DayFormat.Full)}", style: MyTextStyle.LIST_BOTTOM,),
          Expanded(
            child: buildBottomItem("ic_comment_30", "${article.commentCount}"),
          ),
        ],
      ),
    );
  }

  buildBottomItem(String imageName, String text){
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Image.asset(PdUtil.getImagePath(imageName), width: Dimens.view_item_icon_height_smallest, fit: BoxFit.fitWidth,),
        Text(" $text", style: MyTextStyle.LIST_BOTTOM,)
      ],
    );
  }
}
